<template>
    <div class="warp-2 body-content" style="height: 100%;">
        <navbar :title="$t('errorBank')" :backCallback="backPerson"></navbar>
        <div class="content-bottom" >
            <div style="height: 100%;">
                <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
                    <van-list
                    v-model="isLoading"
                    :finished="finished"
                    :finished-text="(finished&&total>0) ? $t('no_more') : ''"
                    loding-text="loading"
                    @load="getQuestionList"
                    >
                        <div class="view-body body-content" style="padding:0 15px">
                            <div class="questions">
                                <div class="number-questions">
                                    <!-- 错题总数 -->
                                    <div style="text-align: center;">
                                        <p style="font-size:24px;color:#fff;margin-bottom:5px;font-weight:600">
                                            <span @click="goErrorDetail(0)">
                                                {{errorQueObj.errorNum||0}}
                                            </span>
                                            <span style="font-size: 11px;font-weight:400;">{{$t('subject')}}</span>
                                        </p>
                                        <p @click="goNull" style="color:#fff;font-size: 13px;">{{$t('incorrect_num')}}</p>
                                    </div>
                                    <!-- 现已掌握 -->
                                    <div style="text-align: center;">
                                        <p style="font-size:24px;color:#fff;margin-bottom:5px;font-weight:600;position: relative;">
                                            <span @click="goErrorDetail(1)">
                                                {{errorQueObj.practiceCompleteNum||0}}
                                                <span style="font-size: 11px;font-weight:400;">{{$t('subject')}}</span>
                                            </span>
                                        </p>
                                        <p @click="goNull" style="color:#fff;font-size: 13px;">
                                            {{$t('now_mastered')}}
                                            <van-popover v-model="showPopover" trigger="click" placement="top">
                                                <div class="popover-txt">{{ dotText }}</div>
                                                <template #reference>
                                                    <i class="tip-box"></i>
                                                    <!-- <van-icon name="info"/> -->
                                                </template>
                                            </van-popover>
                                        </p>
                                    </div>
                                    <!-- 更多 -->
                                    <p class="more"><span @click="goErrorDetail()">{{$t('more_error')}}<van-icon name="arrow" /></span></p>
                                </div>
                            </div>
                            <div class="exercises">
                                <p style="font-weight: 400;font-size: 13px;margin-bottom: 16px;">
                                    {{$t('errorPractice')}}
                                </p>
                                <div class="mistake-exercises">
                                    <div class="exercises-item">
                                        <div class="item-icon exercises_num"></div>
                                        <div class="item-text">
                                            <p style="font-size:24px;color:#80C269;font-weight:600">
                                                {{errorQueObj.practiceNum||0}}
                                                <span style="font-size: 11px;">{{$t('learning_history_question_unit')}}</span>
                                            </p>
                                            <p style="color:#999999;font-size: 11px;">{{$t('exercises_time')}}</p>
                                        </div>
                                    </div>
                                    <div class="exercises-item">
                                        <div class="item-icon exercises_time"></div>
                                        <div  class="item-text">
                                            <p style="font-size:24px;color:#F6B37F;font-weight:600">
                                                {{errorQueObj.practiceTime?(errorQueObj.practiceTime/60/60).toFixed(1):0}}
                                                <span style="font-size: 11px;">{{$t('personal_time')}}</span>
                                            </p>
                                            <p style="color:#999999;font-size: 11px;">{{$t('practiced_time')}}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div v-if="questionList.length > 0">
                                <template v-for="(item,index) in questionList" >
                                    <div class="item-question" :key="index">
                                        <div>
                                            <div class="item-dis">
                                                <div class="dis_text">
                                                    <span class="dis_icon"></span>
                                                    <span style="font-weight:600;font-size:13px;color: #333333;">{{ item.createDate || '--' }} </span>
                                                    <span class="color999" style="font-size:10px;">{{ item.practiceType === 1 ? $t('specialized_practice') : $t('random_exercise') }}</span>
                                                </div>
                                                <div class="dis_arrow">
                                                    <span v-if="item.submit" @click="goPractice(item.id,true)"></span>
                                                </div>
                                            </div>
                                            <div style="margin-top: 20px; font-size: 11px;">
                                                <span class="color999">{{$t('number_ques')}}：</span>
                                                <span class="color333">{{item.queNum}}{{$t('subject')}}</span>
                                            </div>
                                            <div class="color666 item-dis">
                                                <div class="item-ids_txt">
                                                    <div style="font-size: 11px;margin-right: 25px;">
                                                        <span class="color999">{{$t('use_time')}}：</span>
                                                        <span class="color333">{{(item.practiceTime/60).toFixed(1)}}{{$t('mod_time_minute')}}</span>
                                                    </div>
                                                    <div style="font-size: 11px;">
                                                        <span class="color999">{{$t('accuracy')}}：</span>
                                                        <span class="color333">{{Math.round(item.accuracy * 100) || 0 }}%</span>
                                                    </div>
                                                </div>
                                                <div style="margin-right: 20px;">
                                                    <span class="button-go" v-if="!item.submit"  @click="goPractice(item.id,false)">{{$t('start_practice')}}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </div>
                            <div class="bottom-shadow" style="height: 1px;margin-top: -1px;" v-if="total > 0"></div>
                            <!--暂无数据-->
                            <div v-if="!isLoading && total === 0" style="height:100%;">
                                <div class="box-table" style="width:100%;height:100%;">
                                    <div class="box-table-cell" style="text-align: center;">
                                        <div class="no-data">
                                            <img src="../../../static/images/no-data.png" alt=""/>
                                            <p class="color999">{{ $t('no_data') }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <common-loading :isLoading="isLoading"></common-loading>
                        </div>
                    </van-list>
                </van-pull-refresh>
            </div>
            <div class="sign-up-content">
                <p class="sign-up" style="background: #ff9900;" @click="openPractice('random')">{{$t('start_random_practice')}}</p>
                <p class="sign-up" style="background: #075ebb;" @click="openPractice('special')">{{$t('start_specialized_practice')}}</p>
            </div>
            <!-- 开始练习弹窗 -->
            <van-overlay :show="isSelectType" @click="isSelectType = false">
                <div class="popup-body">
                    <div class="popup-content"  @click.stop>
                        <div class="electPopup-titles">
                            <div class="img-sty">
                                <img src="./images/title-icon.png" alt=""/>
                            </div>
                            <div class="font-size16" style="color: #075EBB;line-height: 80px;margin-left: -15px;letter-spacing: 1.5px;">{{$t('random_exercise')}}</div>
                            <div style="margin-top: 10px;margin-right: 15px;">
                              <van-icon name="cross" color="#999" size="16" @click="isSelectType = false"/>
                            </div>
                        </div>
                        <div style="padding:10px 20px 0">
                            <div class="lable-sty">{{$t('practice_setting')}}：
                                <p style="color:#999;font-size:12px;margin:10px 0 15px">{{$t('bank-tips1')}}</p>
                            </div>
                            <van-checkbox-group v-model="practiceFrom.setting" class="img-list">
                                <van-checkbox name="MC" shape="square">
                                    <span style="display: inline-block;">{{$t('MC')}} ({{practiceNumObj.mcNum}}{{ $t('individual') }})</span>
                                    <input type="number" @click.stop v-model="practiceFrom.MC" :placeholder="$t('tips_4')"/>
                                </van-checkbox>
                                <van-checkbox name="MCQ" shape="square">
                                    <span style="display: inline-block;">{{$t('MCQ')}}({{practiceNumObj.mcqNum}}{{ $t('individual') }})</span>
                                    <input type="number" @click.stop v-model="practiceFrom.MCQ" :placeholder="$t('tips_4')"/>
                                </van-checkbox>
                                <van-checkbox name="TF" shape="square">
                                    <span style="display: inline-block;">{{$t('TF')}} ({{practiceNumObj.tfNum}}{{ $t('individual') }})</span>
                                    <input type="number" @click.stop v-model="practiceFrom.TF" :placeholder="$t('tips_4')"/>
                                </van-checkbox>
                                <van-checkbox name="FB" shape="square">
                                    <span style="display: inline-block;">{{$t('FB')}} ({{practiceNumObj.fbNum}}{{ $t('individual') }})</span>
                                    <input type="number" @click.stop v-model="practiceFrom.FB" :placeholder="$t('tips_4')"/>
                                </van-checkbox>
                                <van-checkbox name="MT" shape="square">
                                    <span style="display: inline-block;">{{$t('MT')}} ({{practiceNumObj.mtNum}}{{ $t('individual') }})</span>
                                    <input type="number" @click.stop v-model="practiceFrom.MT" :placeholder="$t('tips_4')"/>
                                </van-checkbox>
                            </van-checkbox-group>
                        </div>
                        <div class="button-sty" @click="startPractice">
                            <span style="letter-spacing: 1.5px;">{{$t('start_practice')}}</span>
                        </div>
                    </div>
                </div>
            </van-overlay>
        </div>
    </div>
</template>

<script>
import {Dialog, Checkbox, CheckboxGroup, Toast, Icon, Overlay} from 'vant';
export default {
    name: 'MyKnowledge',
    components: {
        Dialog,
        Checkbox,
        CheckboxGroup,
        Icon,
        vanOverlay: Overlay
    },
    data() {
        return {
            isLoading: false,
            loading: false,
            total: 0,
            isSelectType: false,
            questionList: [],
            errorQueObj: {},
            pageData: {
                usrEntId: this.$route.params.usrEntId,
                current: 1,
                size: 10
            },
            practiceNumObj: {},
            practiceFrom: {
                setting: [],
                eqId: 0,
                practiceType: 0,
                timeLimit: 0,
                queNum: 0,
                MC: null, // 单选题数量
                MCQ: null, // 多选题数量
                TF: null, // 判断题数量
                FB: null, // 填空题数量
                MT: null // 配对题数量
            },
            dotText: '',
            showPopover: false,
            finished: false,
            isRefresh: false
        };
    },
    created() {
        this.isLoading = true;
        this.getErrorQUestionInfo();
        this.getQuestionList();
    },
    methods: {
        getQuestionList(option) {
            this.$axios({
                method: 'GET',
                url: '/app/api/trainee/error-question-practice/page',
                params: this.pageData
            }).then(res => {
                let _data = res.data;
                if (_data.results) {
                    if (option && option === 'refresh') {
                        this.questionList = _data.results;
                    } else {
                        this.questionList = [...this.questionList, ..._data.results];
                    }
                }
                this.total = res.data.totalRecord;
                this.isLoading = false;
                this.pageData.pageNo++;
                if (this.questionList.length >= this.total) {
                    this.finished = true;
                }
            });
        },
        backPerson() {
            this.$router.replace(`/personal/${this.wbEncryptor(window.localStorage.getItem('loginUser'))}`);
        },
        getErrorQUestionInfo() {
            this.$axios({
                method: 'GET',
                url: `/app/api/trainee/error-question/user/${this.$route.params.usrEntId}`
            }).then(res => {
                this.errorQueObj = res.data;
                this.dotText = this.$t('tips_9', { value: this.errorQueObj.errorQuestionNum });
            });
        },
        /*下拉刷新*/
        onPulldownTop() {
            this.isRefresh = true;
            setTimeout(() => {
                this.finished = false;
                this.pageData.current = 1;
                this.getQuestionList('refresh');
                this.isRefresh = false;
            }, 900);
        },
        goErrorDetail(type) {
            // 0: 未掌握，1： 已掌握
            this.$router.push({ path: '/mistakeExercises/errorDetail', query: { type: type } });
        },
        goNull() {},
        // 打开练习弹窗
        openPractice(type) {
            if (type === 'random') {
                this.isSelectType = true;
                this.$axios({
                    method: 'GET',
                    url: `/app/api/trainee/error-question/user/${this.$route.params.usrEntId}/num`
                }).then(res => {
                    this.practiceNumObj = res.data;
                    this.practiceFrom = {
                        setting: [],
                        eqId: this.errorQueObj.id,
                        practiceType: 0, // 0随机练习,1专项练习
                        timeLimit: 0,
                        queNum: 0,
                        MC: null, // 单选题数量
                        MCQ: null, // 多选题数量
                        TF: null, // 判断题数量
                        FB: null, // 填空题数量
                        MT: null // 配对题数量
                    };
                });
            } else {
                Toast.fail(this.$t('feature_development'));
            }
        },

        startPractice() {
            if (this.practiceFrom.setting.length > 0) {
                // 如果勾选了题型，必须填入数量且数量不能大于题库数量
                this.practiceFrom.queNum = 0;
                for (let i = 0; i < this.practiceFrom.setting.length; i++) {
                    const key = this.practiceFrom.setting[i];
                    let key1 = '';
                    if (key === 'MC') key1 = 'mcNum';
                    if (key === 'MCQ') key1 = 'mcqNum';
                    if (key === 'TF') key1 = 'tfNum';
                    if (key === 'FB') key1 = 'fbNum';
                    if (key === 'MT') key1 = 'mtNum';
                    if (!Number(this.practiceFrom[key])) {
                        Toast.fail(this.$t('tips_6') + this.$t(key) + this.$t('selected_num'));
                        return false;
                    } else if (Number(this.practiceFrom[key]) > Number(this.practiceNumObj[key1])) {
                        Toast.fail(this.$t(key) + this.$t('tips_7'));
                        return false;
                    } else {
                        this.practiceFrom.queNum = this.practiceFrom.queNum + Number(this.practiceFrom[key]);
                    }
                }
                const obj = {
                    eqId: this.practiceFrom.eqId,
                    practiceType: this.practiceFrom.practiceType,
                    timeLimit: 0,
                    queNum: this.practiceFrom.queNum,
                    ruleDto: {
                        mcNum: Number(this.practiceFrom.MC), // 单选题数量
                        mcqNum: Number(this.practiceFrom.MCQ), // 多选题数量
                        tfNum: Number(this.practiceFrom.TF), // 判断题数量
                        fbNum: Number(this.practiceFrom.FB), // 填空题数量
                        mtNum: Number(this.practiceFrom.MT) // 配对题数量
                    }
                };
                this.loading = true;
                this.$axios({
                    method: 'POST',
                    url: `/app/api/trainee/error-question-practice`,
                    data: obj
                }).then(res => {
                    this.loading = false;
                    this.randomModal = false;
                    this.getQuestionList();
                    // 新开页面：打开练习页面
                    this.goPractice(res.data.errMsg, false);
                });
            } else {
                Toast.fail(this.$t('tips_5'));
            }
        },
        goPractice(id, type) {
            if (type) {
                this.$router.push({path: `/mistakeExercises/report?id=${id}`});
            } else {
                this.$router.push(`/mistakeExercises/practice?id=${id}`);
            }
        }
    }
};
</script>

<style scoped lang="less">
    .content-bottom{
        padding: 56px 0;
        height: calc(100% - 114px);
        .questions{
            margin-top: 16px;
            padding: 25px 0;
            background: url('./images/bg.png') no-repeat;
            padding: 30px 21px 28px;
            margin-bottom: 12px;
            background-size:cover;
            .more{
                color: #fff;
                background: #7ACCF4;
                border-radius: 5px 5px 5px 5px;
                padding: 5px 5px 5px 10px;
                font-size: 13px;
            }
            .number-questions{
                display: flex;
                justify-content: space-around;
                align-items: center;
                .tip-box{
                    background: url(./images/tip.png) no-repeat;
                    display: inline-block;
                    width: 9px;
                    height: 9px;
                    margin-left: 2px;
                }
            }
        }
        .exercises{
            padding: 16px;
            background: #FFFFFF;
            border-radius: 5px;
            margin-bottom: 13px;
            .mistake-exercises{
                display: flex;
                justify-content: space-around;
                .exercises-item{
                    display: flex;
                    align-items: center;
                    .item-icon{
                        width: 35px;
                        height: 35px;
                        margin-right: 14px;
                    }
                    .exercises_num{
                        background: url(./images/practice.png);
                        background-size: cover;
                    }
                    .exercises_time{
                        background: url(./images/time1.png);
                        background-size: cover;
                    }
                    .item-text{}
                }
            }
        }
        .item-question{
            // display: flex;
            // align-items: center;
            // justify-content: space-between;
            background: #fff;
            padding: 20px 12px;
            border-radius: 4px;
            margin-bottom: 11px;
            padding-right: 10px;
            padding-bottom: 10px;
            .item-dis{
                display: flex;
                justify-content: space-between;
                align-items: center;
                .dis_icon{
                    display: inline-block;
                    width: 14px;
                    height: 14px;
                    background: url(./images/time.png) no-repeat;
                    background-size: cover;
                }
                .dis_text{
                    display: flex;
                    align-items: center;
                    span{
                        margin-right: 15px;
                    }
                }
                .dis_arrow{
                    span{
                        display: inline-block;
                        width: 7px;
                        height: 13px;
                        background: url(./images/back.png) no-repeat;
                    }
                }
                .item-ids_txt{
                    display: flex;
                    margin-top: 5px;
                }
            }
        }
        .button-go{
            display: inline-block;
            color: #075EBB;
            border-radius: 5px;
            border: 1px solid #075EBB;
            font-size: 12px;
            width: 90px;
            text-align: center;
            height: 25px;
            line-height: 25px;
        }
    }
.sign-up-content {
    display: flex;
    height: 56px;
    border-top: 1px solid #cccccc;
    align-content: center;
    align-items: center;
    position: absolute;
    width: 100%;
    z-index: 1;
    justify-content: space-around;
    background: #fff;
    .sign-up{
        width: 150px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        color: #ffffff;
        border-radius: 32px;
        margin-left: 10px;
    }
}
/deep/.van-icon-info{
    position: absolute;
    font-size: 20px;
    color: #aaa;
    top: 5px;
}
.popup-body{
    padding:0 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    .popup-content{
        width:100%;
        background-color: #fff;
        border-radius: 10px;
        overflow: hidden;
        .electPopup-titles{
            background: url(./images/head-bg.png) no-repeat;
            display: inline-block;
            width: 100%;
            height:65px;
            background-size: cover;
            display:flex;
            justify-content: space-between;
            .img-sty{
                img{
                    width:90px;
                    height:80px;
                    margin-top:-10px;
                    margin-left:-15px;
                }
            }
        }
        .lable-sty{
            color:#333;
        }
        .lable-sty:before{
            content: "*";
            color:#333;
        }
        .button-sty{
            width: 150px;
            margin: 20px auto;
            height: 36px;
            line-height: 36px;
            background: #075EBB;
            border-radius: 10px;
            color: #fff;
            text-align: center;
        }
        /deep/.van-checkbox__icon .van-icon{
            border-radius: 4px;
            border: 0.5px solid #075EBB;
        }
        /deep/.van-checkbox__icon--checked .van-icon{
            background-color: #075EBB;
        }
        /deep/.van-checkbox__label{
            color:#666;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        /deep/.van-checkbox__icon{
            font-size: 16px;
        }
        /deep/.van-checkbox{
            padding: 5px 0 5px 5px;
            border-bottom: 1px solid #eee;
            input{
                border: none;
                padding: 5px;
                color:#b5b5b5;
                text-align: end;
                width:120px;
            }
        }
        /deep/input::-webkit-input-placeholder{
            display:inline-block;
            color:#b5b5b5;
            font-size:12px;
        }
        input::-moz-placeholder {
            display:inline-block;
            color:#b5b5b5;
            font-size:12px;
        }
        input:-ms-input-placeholder {
            display:inline-block;
            color:#b5b5b5;
            font-size:12px;
        }
        input:-moz-placeholder {
            display:inline-block;
            color:#b5b5b5;
            font-size:12px;
        }
    }
}
.popover-txt{
    max-width: 220px;
    padding: 5px 10px;
}

</style>
